<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>关于我</title>
	</head>
	<body>
	<!--导航-->
	<nav th:replace="_fragments :: menu(5)">

	</nav>
		<!--中间内容--->
		<div class="m-padded-tb-big m-container">
<div class="ui container">
	<div class="ui stackable grid">
		<div class="eleven wide column">
			<div class="ui segment">
				<img src="https://unsplash.it/800/600?image=1005" alt="" class="ui rounded image" />
			</div>
			
		</div>
		<div class="five wide column">
			<div class="ui top  attached segment">
				<div class="ui header">关于我</div>
			</div>
			<div class="ui   attached segment">
				<p class="m-text">侯泽宇:自我介绍自我介绍自我介绍自我介绍自我介绍自我介绍自我介绍自我介绍自我介绍</p>
				<p class="m-text">自我介绍自我介绍自我介绍自我介绍自我介绍自我介绍自我介绍自我介绍自我介绍</p>
			</div>
				<div class="ui   attached segment">
				<div class="ui orange basic left pointing label">编程</div>
				<div class="ui orange basic left pointing label">写作</div>
				<div class="ui orange basic left pointing label">思考</div>
				<div class="ui orange basic left pointing label">运动</div>
			</div>
				<div class="ui   attached segment">
				<div class="ui teal basic left pointing label m-margin-tb-tiny">JAVA</div>
				<div class="ui teal basic left pointing label m-margin-tb-tiny">JavaScript</div>
				<div class="ui teal basic left pointing label m-margin-tb-tiny">Node</div>
				<div class="ui teal basic left pointing label m-margin-tb-tiny">C++</div>
				<div class="ui teal basic left pointing label m-margin-tb-tiny">....</div>
			</div>
				<div class="ui  bottom attached segment">
				<a  href="#"  class="ui circular icon button"><i class="github icon"></i></a>
				<a  href="#"  class="ui weichat1 circular icon button"><i class="weixin icon"></i></a>
				<a  href="#"  class="ui qq circular icon button" data-position="bottom center" data-content="1067325672"><i class="qq icon"></i></a>
			</div>
			<div class="ui weichat flowing popup transition hidden">
				<img class="ui rounded image"  th:src="@{/imges/a.jpg}" style="width: 100px;"/>
			</div>
		</div>
	</div>
</div>
		</div>
		<!--底部footer--->
	<footer th:replace="_fragments :: footer" >

	</footer>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
		<script type="text/javascript">
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			});
			$('.weichat1').popup({
				popup : $('.weichat'),
				on : 'hover',
				position :'bottom center'
			});
			$('.qq').popup();
		</script>
	</body>
</html>
